<template>
  <div class="mai">
    <header>
      <div class="shang"></div>
      <div class="xia">
        <i
          class="icon iconfont icon-arrow-left"
          @click="()=>{
          $router.push('/home')
          }"
        ></i>
        <p>卖方成交战绩</p>
        <span>
          <i class="iconfont icon-gengduo"></i>
          <i class="iconfont icon-play1"></i>
        </span>
      </div>
    </header>
    <main>
      <div class="city">
        <ul>
          <li @click="handleProvince">
            <span>北京</span>
            <i class="icon iconfont icon-angle-down"></i>
          </li>
          <li>
            <input type="text" placeholder="请在这里输入区域/商圈" />
            <i class="icon iconfont icon-fangdajing"></i>
          </li>
          <li>
            <a href="zufang">租房成交战绩</a>
          </li>
        </ul>
      </div>
      <!-- 房屋 -->
      <div class="fang">
        <dl v-for="v in room" :key="v.id">
          <dt>
            <img :src="v.img" alt="" />
          </dt>
          <dd>
            <h4>{{ v.title }}</h4>
            <p>{{ v.roomeType }}</p>
            <p>
              <span id="price">{{ v.price }}</span>
              <span>{{ v.sigPrice }}</span>
            </p>
            <span>{{ v.type }}</span>
          </dd>
        </dl>
        <!-- 三级联动 -->
        <!-- <van-field
  v-model="fieldValue"
  is-link
  readonly
  label="地区"
  placeholder="请选择所在地区"
  @click="show = true"
/>
<van-popup v-model="show" round position="bottom">
  <van-cascader
    v-model="cascaderValue"
    title="请选择所在地区"
    :options="options"
    @close="show = false"
    @finish="onFinish"
  /> -->
      </div>
    </main>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      room: [],
      show: false,
      flag: false,
    };
  },
  created() {
    axios.get("/getSaleNum").then((res) => {
      console.log(res);
      if (res.data.code === 1) {
        this.room = res.data.data;
      }
    });
  },
  methods: {
    handleProvince() {
      this.$router.push("/good");
    },
  },
};
</script>

<style lang="scss" scoped>
.mai {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  header {
    height: 110px;
    background: #2492f9;
    .shang {
      height: 50px;
    }
    .xia {
      padding: 0 13px;
      height: 60px;
      align-items: center;
      display: flex;
      justify-content: space-between;
      color: #fff;
      font-size: 18px;
      > i {
        font-size: 20px;
        font-weight: bold;
      }
      > span {
        padding: 6px 16px;
        border-radius: 16px;
        border: 2px solid #fff;
        display: flex;
        i {
          font-size: 16px;
        }
        .icon-play1 {
          margin-left: 20px;
        }
      }
    }
  }
  main {
    flex: 1;
    overflow-y: scroll;
    .city {
      margin-top: 4%;
      width: 100%;
      padding: 10px;

      height: 40px;
      align-self: center;
      ul {
        display: flex;
        justify-content: space-around;
        li {
          display: flex;
          i.iconfont {
            font-size: 18px;
          }
          span {
            font-size: 18px;
          }
          a {
            color: cornflowerblue;
          }
        }
      }
    }
  }
}
.fang {
  width: 100%;
  padding: 0 12px;

  margin: 0 auto;
  dl {
    margin: 8% 0;
    display: flex;

    dt {
      width: 120px;
      height: 100px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    dd {
      flex: 1;
      margin-left: 6%;
      h4 {
        font-weight: 900;
        font-size: 18px;
      }
      p {
        line-height: 30px;
        #price {
          color: orange;
          margin-right: 8%;
        }
      }
      > span {
        padding: 4px 10px;
        background: #aaa;
      }
    }
  }
}
.dialog {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
</style>